<script lang="ts" setup>
import { ref,computed, onMounted, reactive, toRaw } from 'vue'
import { ElTable,ElMessage,ElMessageBox } from 'element-plus'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import {ShopHook} from'../../hooks/shopManageHooks'
import { useRouter } from "vue-router";
import { queryObject } from '../../service/shopManagentService';

const router=useRouter();
const ShopHookS=ShopHook();
const tableData=ref<Array<any>>([]);
const formInline=reactive<queryObject>({
    name:null,
    spu_type_id:null

})
const currentPage=ref<number>(1);
const limit=ref<number>(5);
const total=ref<number>(0);

function getSearchObj(){
    let formdata=toRaw(formInline) as queryObject;
    formdata.page=currentPage.value;
    formdata.limit=limit.value;
    return formdata;
}

onMounted(()=>{
//   ShopHookS.getList(getData);
ShopHookS.queryShop(getSearchObj(),getData)
});

const input = ref('')
const value = ref('')
const value2 = ref('')
const radio1 = ref('全部商品')

const options=[
    {value:'虚拟商品',label:'虚拟商品',},
    {value:'实物商品',label:'实物商品',},
    {value:'积分兑换商品',label:'积分兑换商品',},
    ]
const options2=[
    {value:'上架',label:'上架',},
    {value:'下架',label:'下架',},
    {value:'删除',label:'删除',},
]

function getData(data:any,count:number){
    tableData.value=data;
    total.value=count;
}
const search=()=>{
    currentPage.value=1;
    ShopHookS.queryShop(getSearchObj(),getData)
};
const pageChange=(val:any):void=>{
    console.log("当前页码",val);
    currentPage.value=val;
    ShopHookS.queryShop(getSearchObj(),getData)
}
//编辑添加跳转
const toUpdate=(e:any,type:number)=>{
    let data={};
    if(type==1){
        let id=e.currentTarget.dataset.id;
        data={id,type};
    }else{
        data={type}
    }
    router.push({name:"addStore",query:data})
}

//确认删除
const openConfirm=(e:any)=>{
    let id=e.currentTarget.dataset.id;
    ElMessageBox.confirm("此操作将会永久删除数据,是否继续？",{
        confirmButtonText:"确定",
        cancelButtonText:"取消",
        type:"warning"
    }).then(()=>{
        console.log("确认");
        toDelete(id);
    }).catch((err:any)=>{
        console.log(err);
        ElMessage({
             type: "info",
             message: "已取消删除",
        })
    })
}
const toDelete=(id:any)=>{
    currentPage.value=1
    ShopHookS.deleteById(id,getSearchObj(),getData)
}

</script>
<template>
<div>
<el-row>
    <el-col :span="24">
        <div>
          <el-radio-group v-model="radio1" >
           <el-radio-button label="全部商品" class="all"/>
           <el-radio-button label="已上线" class="all"/>
           <el-radio-button label="未上线" class="all"/>
          </el-radio-group>
        </div>
        </el-col>
  </el-row>
  <el-row class="search">
    <el-col :span="24">
        <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                  <el-input v-model="formInline.name" placeholder="商品名称/商品编号" clearable class="inName"/>
                </el-form-item>

                <el-form-item>
                  <el-select v-model="formInline.spu_type_id" clearable class="inSearch" placeholder="请选择商品分类" >
                     <el-option label="全部" :value="null"></el-option>
                     <el-option label="虚拟物品" :value="'1'"></el-option>
                     <el-option label="实物商品" :value="'2'"></el-option>
                     <el-option label="积分兑换物品" :value="'3'"></el-option>
                    </el-select>      
                </el-form-item>

                <el-form-item>
                      <el-button type="primary" class="searchBtn" @click="search()">查 询</el-button>
                      <el-button type="primary" plain class="add" @click="toUpdate($event, 0)">添加商品</el-button>
                </el-form-item>
            </el-form>
            
            
            
        </div>
    </el-col>
  </el-row>
    <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" table-layout="fixed" class="tableList">
     <el-table-column type="selection" width="55" align="center"/>
     <el-table-column prop="id" width="100" label="编号" align="center">
        <template #default="{ row }">
          <span class="hiddenText">{{ row.id }}</span>
        </template>
     </el-table-column>
     <el-table-column prop="img" label="商品图片" align="center"/>
     <el-table-column prop="name" label="商品名称" align="center"/>
     <el-table-column prop="price" label="价格" align="center"/>
     <el-table-column prop="state" label="上线/下架" align="center">
        <template #default="s">
         <span v-if="s.row.state=='1'" class="state" :data-id="s.row.id" @click="updateStatus($event, 1)">上线</span>
          <span v-else class="state" :data-id="s.row.id" @click="updateStatus($event, 0)">下线</span>               
        </template>
     </el-table-column>
     <el-table-column prop="tag" label="标签"  align="center"/>
     <el-table-column prop="sales" label="销量"  align="center"/>
     <el-table-column prop="spu_type_id" label="商品分类">
        <template #default="s">
        <span v-if="s.row.spu_type_id=='1'">虚拟商品</span>
        <span v-else-if="s.row.spu_type_id=='2'">实物商品</span>       
        <span v-else >虚拟商品</span>   
        </template>
     </el-table-column>
     <el-table-column  label="操作" align="center">
        <template #default="s">
        <el-button type="primary" :icon="Edit" :data-id="s.row.id" @click="toUpdate($event, 1)">编辑</el-button>
        <el-button type="danger" :icon="Delete" :data-id="s.row.id"  @click="openConfirm($event)">删除</el-button>
        </template>
       
     </el-table-column>
  </el-table>
  <el-row>
    <el-col :span="24">
        <div class="footer">
         <el-select v-model="value2" class="bulk" clearable placeholder="批量操作" >
             <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>      
              <el-button type="primary" class="searchBtn">确 定</el-button>
              <el-pagination background layout="prev, pager, next" :page-size="limit" :current-page="currentPage" :total="total" @current-change="pageChange" class="fen"></el-pagination>
        </div>
    </el-col>
  </el-row>
   
</div>
</template>


<style scoped>
.inName{
    width: 300px;
}
.search{
    margin-top: 20px;
}
.inSearch{
    margin-left: 10px;
}
.searchBtn{
    margin-left: 10px;
}
.footer{
    overflow: hidden;
    margin-top: 20px;
}
.bulk{
    width: 150px;
}
.tableList{
    margin-top: 20px;
}
.fen{
    float: right;
}
.all{
    margin-right: 10px;
}
.add{
    text-decoration: none;
}
</style>